<template>
  <div class="/SPUAddNew">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin/index' }">
        <i class="el-icon-s-promotion"></i> 酒店客房后台管理首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>历史订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div>
      <template>
        <el-table
            :data="orderData"
            border
            style="width: 1451px;margin: 30px 30px 0 30px">
          <el-table-column
              prop="id"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="orderId"
              label="订单编号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="room"
              label="房间号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="100">
          </el-table-column>
          <el-table-column
              prop="idNUmber"
              label="身份证"
              width="200">
          </el-table-column>
          <el-table-column
              prop="num"
              label="人数"
              width="50px">
          </el-table-column>
          <el-table-column
              prop="tel"
              label="手机号"
              width="150px">
          </el-table-column>
          <el-table-column
              prop="inTime"
              label="入住时间"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="exitTime"
              label="退房时间"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="other"
              label="备注"
              width="150px">
          </el-table-column>
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改
              </el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

      orderData: [{
        id: '1',
        orderId: '202205121082110',/*yymmdd-room-person-gender-押金-校验*/
        name: '周杰伦',
        room: '108',
        tel: '137****6666',
        idNUmber: '333333********2222',
        num: '2',
        money: "222",
        inTime: '2022-09-02 20:35:65',
        exitTime: '2022-09-02 20:35:65',
        other: ''
      }],
    }
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  }
}
</script>

<style>
* {
  margin: 0;
  border: none;
}
</style>